<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网 ●ω● {{topic.name}}</title>

<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/non-responsive.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/theTopic.css" rel="stylesheet">  
<link href="../css/sco.message.css" rel="stylesheet">
<link href="../css/scojs.css" rel="stylesheet">  
<link href="../css/topicCreate2.css" rel="stylesheet">
<link href="../css/topicCreate.css" rel="stylesheet">
<link href="../ico/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"/>  
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap.js"></script>
<script src="../js/collect.js"></script>
<script src="../js/sco.message.js"></script>
<script src="../js/review.js"></script>
<script src="../js/ban.js"></script>
<script src="../js/dr.js"></script>
<script src="../js/logout.js"></script>
<script src="../js/textEditor2.js"></script>
<script src="../js/textEditor.js"></script>
<script src="../js/comment_topic.js"></script>
</head>
<body>
	{% include 'public/common/header.html' %}
	<div class="container" style="margin-top:45px">
		<div class="row">
<!-- left div -->
			<div class="col-xs-8">
<!-- 小组信息div -->
				<div class="groupMes">
					<div class="topic_title">话题名：<b>{{topic.name}}</b></div>
					<div>
						<div class="group_img pull-left">
							<a href="{% url 'users:home' info.user_id %}"><img src="{{user.domain}}/{{user.img}}" class="img-circle" width="100%"/></a>
						</div>
						<div class="group_names pull-left">
							<div class="topic_publisher pull-left">
								<a href="{% url 'users:home' info.user_id %}"><b>{{user.user_name}}</b></a>
							</div>
<!-- 只有小组创建者才有 开始处-->
						{% if competence %}
							<div class="pull-right">
								<span><a href="javascript:void(0)" onclick="ban({{user.id}})">限制用户</a></span>
								<span class="delSpan"><a href="javascript:void(0)" onclick="dt({{topic.id}})">删除话题</a></span>
							</div>
						{% endif %}
<!-- 只有小组创建者才有  结束处-->
							<div class="clearfix"></div>
							<div class="topic_publisher_sign"><i>{{user.sign}}</i></div>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="group_intro">
					<div class="topdirection"></div>
					<div class="group_introduce">
						<div>
							<div class="time"></div>
							<div id="sharecontent">{% autoescape off %}{{topic.content}}{% endautoescape %}</div>
							<!--<div id="sharecontent">{{topic.content}}</div>-->
						</div>
						<div class="pull-right">
							<!--<div id="qqwb_share__" data-appkey="801515398" data-icon="1" data-counter="1" data-counter="top" data-content="{{topic.content|removetags:'img br div b i u a font strike ul ol li blockquote'}}" data-pic=""></div>-->
							<span class="span_news"><a href=""><i class="icon-share-alt"></i> 转发{{topic.share_con}}</a></span>
							<span id="reviewOfTopic_con" class="span_news"><a href="#editor" ><i class="icon-comment"></i> 回复<span id="reviewOfTopic_con{{topic.id}}">{{topic.review_con}}<span></a></span>
							<!--<span id="reviewOfTopic_con" class="span_news"><a href="javascript:void(0)" onclick="topic_comment();"><i class="icon-comment"></i> 回复<span id="reviewOfTopic_con{{topic.id}}">{{topic.review_con}}<span></a></span>-->
						</div>
						<div class="clearfix"></div>
<!-- 评论框  评论时候点击出现 -->
						<div class="group_comment" id="group_comment">
							<div class="comment_act">
								<div class="comment_act1 pull-left">
									<textarea id="comment" class="comment_act1_tarea"></textarea>
								</div>
								<div class="comment_act2 pull-left">
									<button type="button" onclick="comment_topic({{topic.id}})" class="btn btn-info comment_act_btn">评论</button>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
<!-- 评论评论框  评论评论时候点击出现 -->
						<div class="group_comment" id="group_cccomment">
							<div class="comment_act">
								<div class="comment_act1 pull-left">
									<input type="hidden" id="rere_hidden">
									<textarea id="cccomment" class="comment_act1_tarea"></textarea>
								</div>
								<div class="comment_act2 pull-left">
									<button type="button" onclick="cccomment_topic({{topic.id}})" class="btn btn-info comment_act_btn">评论</button>
								</div>
								<div class="clearfix"></div>
								<div class="roll_comment"><a href="javascript:void(0)" onclick="roll_comment();">收起回复</a></div>
							</div>
						</div>
					</div>
				</div>
<!-- 评论 -->			
				<div class="topic_comment">
					<div id="ajax_comment"></div>
<!-- 一条评论 循环开始处-->
				{% for r in review %}
					<div style="margin-top:20px;" class="dingwei_{{r.6}}">
						<div class="commentDiv1 pull-left">
							<img src="{{r.7}}/{{r.5}}" class="img-circle" width="100%"/>
							<!--<button style="margin-left:15px;margin-top:5px" type="button" class="btn btn-success btn-xs" onclick="add({{h.0}});">关注</button>-->
						</div>
						<div class="pull-left commentDiv2">
							
							<div class="commentDiv21 pull-right">
<!-- 只有小组创建者才有 开始处-->
							{% if competence %}
								<div>
									<div class="pull-right">
<!-- 限制用户 -->
										<span><a href="javascript:void(0)" onclick="ban({{r.6}})">限制用户</a></span>
<!-- 解除限制用户 -->
										<span class="delSpan"><a href="javascript:void(0)" onclick="dr({{r.6}})">删除回复</a></span>
									</div>
									<div class="clearfix"></div>
								</div>
							{% endif %}
<!-- 只有小组创建者才有  结束处-->
							
								<div>
									<div class="pull-left time"><a href="{% url 'users:home' r.8 %}" target="_blank"><b>{{r.4}}</b></a></div>
									
									<div class="pull-right time">{{r.1|date:"Y-m-d H:i:s"}}</div>
									<div class="clearfix"></div>
								</div>
								<div class="review_img">{% autoescape off %}{{r.0}}{% endautoescape %}</div>
								<div style="text-align:right;">
									<span class="span_news"><a href="javascript:void(0)" onclick="clickgood({{r.6}})"><i class="icon-thumbs-up"></i> <span id="good{{r.6}}">{{r.2}}</span></a></span>
									<span class="span_news"><a href="javascript:void(0)" onclick="topic_cocomment({{r.6}},'{{r.4}}');"><i class="icon-comment"></i> <span id="rerecomment_con{{r.6}}">{{r.3}}</span></a></span>
								</div>
<!-- 评论的评论 
								<div id="group_cccomment{{r.6}}" class="group_comment2">
									<div class="comment_act">
										<div class="comment_act1 pull-left">
											<textarea id="cccomment_act1_tarea{{r.6}}" class="comment_act1_tarea"></textarea>
										</div>
										<div class="comment_act2 pull-left">
											<button type="button" class="btn btn-info comment_act_btn" onclick="fuck({{r.6}});">评论</button>
										</div>
										<div class="clearfix"></div>
									</div>
								</div>-->
							</div>
							<div class="topdirection_left pull-right"></div>
							<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
					</div>
				{% endfor %}
<!-- 一条评论 循环结束处-->
				</div>	
<!-- texteditor -->
				<div>
					<div class="textEditor_WTF" style="margin-top:80px;">
					
						<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor" style="width:100%;">
					      
					      <div class="btn-group">
					        <a class="btn dropdown-toggle" data-toggle="dropdown" title="字体大小"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
					          <ul class="dropdown-menu">
					          <li><a data-edit="fontSize 5"><font size="5">大</font></a></li>
					          <li><a data-edit="fontSize 3"><font size="3">正常</font></a></li>
					          <li><a data-edit="fontSize 1"><font size="1">小</font></a></li>
					          </ul>
					      </div>
					      <div class="btn-group">
					        <a class="btn" data-edit="bold" title="加粗 (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
					        <a class="btn" data-edit="italic" title="斜体 (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
					        <a class="btn" data-edit="strikethrough" title="删除线"><i class="icon-strikethrough"></i></a>
					        <a class="btn" data-edit="underline" title="下划线 (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
					      </div>
					      <div class="btn-group">
					        <a class="btn" data-edit="insertunorderedlist" title="无序列表"><i class="icon-list-ul"></i></a>
					        <!--<a class="btn" data-edit="insertorderedlist" title="有序列表"><i class="icon-list-ol"></i></a>-->
					        <!--<a class="btn" data-edit="outdent" title="减少缩进  (Shift+Tab)"><i class="icon-indent-left"></i></a>
					        <a class="btn" data-edit="indent" title="增加缩进 (Tab)"><i class="icon-indent-right"></i></a>-->
					      </div>
					      <div class="btn-group">
					        <a class="btn" data-edit="justifyleft" title="左端对齐 (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
					        <a class="btn" data-edit="justifycenter" title="居中 (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
					        <a class="btn" data-edit="justifyright" title="右端对齐 (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
					        <!--<a class="btn" data-edit="justifyfull" title="自适应 (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>-->
					      </div>
					      <div class="btn-group">
							  <a class="btn dropdown-toggle" data-toggle="dropdown" title="添加超链"><i class="icon-link"></i></a>
							  <div class="dropdown-menu input-append">
								    <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
								    <button class="btn" type="button">添加</button>
					          </div>
					        <a class="btn" data-edit="unlink" title="移除超链"><i class="icon-cut"></i></a>
					      </div>
					      <div class="btn-group">
					        <a class="btn" title="添加图片 (或者直接拖拽)" id="pictureBtn"><i class="icon-picture"></i></a>
					        <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
					      </div>
					      <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
					    </div>
					    <div id="editor" style="width:100%;height:100px;">
					     	 话题回复（可添加图片）&hellip;
					    </div>
					   <div class="topic_btn">
					<button type="button" onclick="addReply({{topic.id}})" class="btn btn-info pull-right">添加回复</button>
				</div>
					   
				</div>


				</div>
				<ul class="pager">
				{% if topics.has_previous %}
				  <li><a href="?page={{ topics.previous_page_number }}">&larr;上一页</a></li>
				{% endif %}
				评论第 {{ topics.number }} 页   共{{ topics.paginator.num_pages }} 页.
				{% if topics.has_next %}
				  <li><a href="?page={{ topics.next_page_number }}">下一页&rarr;</a></li>
				{% endif %}
				</ul>
			</div>
<!-- 中间留白div -->
			<div class="col-xs-1">

			</div>
<!-- right div -->
			<div class="col-xs-3">
				<div>
					<div class="group_img_div pull-left">
						<img src="{{group.domain}}/{{group.img}}" width="100%"/>
					</div>
					<div class="group_name_div pull-left">
						<div class="the_group_name"><b>{{group.name}}</b></div>
						<div class="group_return"><a href="{% url 'groups:thegroup' group.id %}"><span class="glyphicon glyphicon-arrow-left"></span> 返回小组</a></div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="topic_collect">
					{% if abord %}
					<button id="collect" style="display:none" type="button" class="btn btn-primary topic_collect_btn" onclick='collect({{topic.id}},1)'>收藏</button>
					<button id="abord" type="button" class="btn topic_collect_btn" onclick='collect({{topic.id}},1)'>取消收藏</button>
					{% else %}
					<button id="collect" type="button" class="btn btn-primary topic_collect_btn" onclick='collect({{topic.id}},2)'>收藏</button>
					<button id="abord" style="display:none" type="button" class="btn topic_collect_btn" onclick='collect({{topic.id}},2)'>取消收藏</button>
					{% endif %}
				</div>
				<div class="my">
					<div class="hot_title"><b>小组热门分享</b></div>
<!-- 小组热门分享 一条热门分享循环开始处 -->
				{% for t in recommend %}
					<div class="hot_intro" style="width:175px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
						<a href="{% url 'groups:thetopic' t.id %}">{{t.name}}</a>
					</div>
				{% endfor %}
<!-- 小组热门分享 一条热门分享循环结束处 -->					
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-12">

			</div>
		</div>
	</div>
	
	<script src="http://mat1.gtimg.com/app/openjs/openjs.js#autoboot=no&debug=no"></script>
	<script type="text/javascript">
		/*window.onload=function(){
			array=window.location.href.split('#');//alert(array[1]);
			if(array[1]){
				$(window).scrollTop($("."+array[1]).offset().top-100);
			}
			var content = document.getElementById("sharecontent").innerHTML;
			re = new RegExp('<img src="(.+?)">');
			pic=content.match(re);
			$("#qqwb_share__").attr("data-pic",pic[1])
			//document.getElementById("qqwb_share__").setAttribute("data-content",document.getElementById("sharecontent").innerHTML);
			//$("#qqwb_share__").attr("data-content",$("#sharecontent").html());
			var imgs = document.getElementsByTagName("img");
			var imgURLs=new Array(imgs.length);
			for(var i = 0;i<imgs.length;i++){
			   imgURLs[i] = imgs[i].src;
			   if(imgURLs[i].match('http://mztopic\.qiniudn\.com/(.*?)')){
			   	if (imgs[i].width>250) {
			   		imgs[i].style.width="300px"
			   	}
			   } 
			}
		}*/

		function topic_comment()
		{
			$("#group_cccomment").hide();
			$("#group_comment").toggle();
		}
		
		function topic_cocomment(re_id,name)
		{
			$("#group_comment").hide();
			$("#cccomment").val('回复'+name+':');
			$("#group_cccomment").show();
			$(window).scrollTop($("#cccomment").offset().top-200);
			$("#rere_hidden").val(re_id);
			//$("#group_cocomment"+re_id).toggle();
		}
		function roll_comment()
		{
			$("#group_cccomment").hide();
		}
		



		 $(function(){
    function initToolbarBootstrapBindings() {
      var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 
            'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
            'Times New Roman', 'Verdana'],
            fontTarget = $('[title=Font]').siblings('.dropdown-menu');
      $.each(fonts, function (idx, fontName) {
          fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
      });
      $('a[title]').tooltip({container:'body'});
    	$('.dropdown-menu input').click(function() {return false;})
		    .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
        .keydown('esc', function () {this.value='';$(this).change();});

      $('[data-role=magic-overlay]').each(function () { 
        var overlay = $(this), target = $(overlay.data('target')); 
        overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
      });
      $('#voiceBtn').hide();
      // if ("onwebkitspeechchange"  in document.createElement("input")) {
      //   var editorOffset = $('#editor').offset();
      //   $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
      // } else {
      //   $('#voiceBtn').hide();
      // }
    };
    initToolbarBootstrapBindings();  
    $('#editor').wysiwyg();
    window.prettyPrint && prettyPrint();
  });

		var xmlHttp; 

		function createXMLRequest(){
			if(window.ActiveXObject){
				xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
			} else if(window.XMLHttpRequest){
				xmlHttp=new XMLHttpRequest();
			}
		}
//添加回复
		function addReply(topic){   
			createXMLRequest();       
			var editor0=document.getElementById("editor").innerHTML;
			if (editor0==""){
				alert("请输入回复内容！！！");
				return;
			} else if (editor0=="话题回复（可添加图片）…"){
				alert("请输入回复内容！！！");
				return;
			}
			var editor1=editor0.replace(/(&nbsp;)/ig," ");
			var editor2=editor1.replace(/\+/g,"*");
			var editor3=editor2.replace(/\s/ig,"{"); 
			var editor=editor3.replace(/\;/g,"}");
			         
			//alert(editor)    
			xmlHttp.open("POST","/groups/topic/comment/");
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xmlHttp.onreadystatechange=function (e) {
				if(xmlHttp.readyState==4 && xmlHttp.status==200){
					var result=eval('('+xmlHttp.responseText+')');  
					//alert(result.img.length);
					//re_array=xmlHttp.responseText.split(',');
					
					var str1='<div id="ajax_comment"></div><div style="margin-top:20px;"><div class="commentDiv1 pull-left"><img src='+result.head+' class="img-circle" width="100%"/></div>';
			        var str2='<div class="pull-left commentDiv2"><div class="commentDiv21 pull-right">';
			        var str3='<div><div class="pull-left time">'+result.name+'</div><div class="pull-right time">刚刚更新</div><div class="clearfix"></div></div>';
			        var str4='<div class="review_img">'+result.content+'</div><div style="text-align:right;">';
			        
			        var str5='<span class="span_news"><a href="javascript:void(0)" onclick="clickgood('+result.commit_id+')"><i class="icon-thumbs-up"></i> <span id="good'+result.commit_id+'">'+result.good_con+'</span></a></span>';
			        var str6='<span class="span_news"><a href="javascript:void(0)" onclick="topic_cocomment('+result.commit_id+',\''+result.name+'\');"><i class="icon-comment"></i> <span id="rerecomment_con'+result.commit_id+'">'+result.reviewCon+'</span></a></span></div></div><div class="topdirection_left pull-right"></div><div class="clearfix"></div></div><div class="clearfix"></div></div>';
			       
			        var strr=str1+str2+str3+str4+str5+str6;
			       

					if(isNaN(result.commit_id)){
						e.preventDefault();
			    		$.scojs_message('服务器出错啦～ ：）', $.scojs_message.TYPE_ERROR);
					} else {
						$("#editor").html('');
						$("#ajax_comment").html(strr);
						$("#ajax_comment").removeAttr("id");
						$("#comment").val('');
						//$("#editor").innerHTML="";
						$("#group_comment").hide();
						$("#reviewOfTopic_con"+topic).html(parseInt($("#reviewOfTopic_con"+topic).html())+1);
						//alert($("#rerecomment_con"+re_array[0]).html());
						//$("#rerecomment_con"+re_array[0]).html(parseInt($("#rerecomment_con"+re_array[0]).html())+1);
						e.preventDefault();
			    		$.scojs_message('您回复成功！', $.scojs_message.TYPE_OK);
					}
				} else {
					e.preventDefault();
			    	$.scojs_message('服务器有小怪兽在捣乱～我们正在尽力捕捉～ ：）', $.scojs_message.TYPE_ERROR);
				}
			};
			xmlHttp.send("id="+topic+"&content="+editor); 
		}
	</script>
</body>
</html>